<template>
  <div style="width:100%;height:200px;" id="smoothLine"></div>
</template>

<script>
import echarts from "echarts";

export default {
  props: {
    LineDataSource: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    LineDataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats();
      });
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var LineDataSource = echarts.init(document.getElementById("smoothLine"));

      var dataSource = [
        ["时间"],
        ["明火走火"],
        ["漏电"],
        ["自燃"],
        ["人为纵火"],
        ["易燃易爆物品燃爆"],
        ["用电负荷超载"],
        ["雷击"],
        ["生活用火不慎"],
        ["生产作业不慎"]
      ];
      this.LineDataSource.forEach((item, index) => {
        dataSource[0][index + 1] = item.mon + "月";
        dataSource[1][index + 1] = item.count1;
        dataSource[2][index + 1] = item.count2;
        dataSource[3][index + 1] = item.count3;
        dataSource[4][index + 1] = item.count4;
        dataSource[5][index + 1] = item.count5;
        dataSource[6][index + 1] = item.count6;
        dataSource[7][index + 1] = item.count7;
        dataSource[8][index + 1] = item.count8;
        dataSource[9][index + 1] = item.count9;
      });
      let option = {
        grid: {
          x: 45,
          y: 55,
          x2: 45,
          y2: 20
        },

        color: [
          "#007bff",
          "#6610f2",
          "#6f42c1",
          "#e83e8c",
          "#dc3545",
          "#fd7e14",
          "#ffc107",
          "#28a745",
          "#20c997"
        ],

        legend: [
          {
            orient: "horizontal",
            x: "5%",
            y: "5%",
            align: "left",
            data: ["明火走火"],
            textStyle: {
              color: "#fff"
            }
          },
          {
            orient: "horizontal",
            x: "20%",
            y: "5%",
            align: "left",
            data: ["漏电"],
            textStyle: {
              color: "#fff"
            }
          },
          {
            orient: "horizontal",
            x: "30%",
            y: "5%",
            align: "left",
            data: ["自燃"],
            textStyle: {
              color: "#fff"
            }
          },
          {
            orient: "horizontal",
            x: "45%",
            y: "5%",
            align: "left",
            data: ["人为纵火"],
            textStyle: {
              color: "#fff"
            }
          },
          {
            orient: "horizontal",
            x: "60%",
            y: "5%",
            align: "left",
            data: ["易燃易爆物品燃爆"],
            textStyle: {
              color: "#fff"
            }
          },
          {
            orient: "horizontal",
            x: "5%",
            y: "15%",
            align: "left",
            data: ["用电负荷超载"],
            textStyle: {
              color: "#fff"
            }
          },
          {
            orient: "horizontal",
            x: "20%",
            y: "15%",
            align: "left",
            data: ["雷击"],
            textStyle: {
              color: "#fff"
            }
          },
          {
            orient: "horizontal",
            x: "30%",
            y: "15%",
            align: "left",
            data: ["生活用火不慎"],
            textStyle: {
              color: "#fff"
            }
          },
          {
            orient: "horizontal",
            x: "45%",
            y: "15%",
            align: "left",
            data: ["生产作业不慎"],
            textStyle: {
              color: "#fff"
            }
          }
        ],
        tooltip: {
          trigger: "axis",
          showContent: false
        },
        dataset: {
          source: dataSource
        },
        xAxis: {
          type: "category", //设置坐标轴字体颜色和宽度
          axisLine: {
            lineStyle: {
              color: "#fff"
              // width: 2
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          gridIndex: 0,
          splitLine: {
            show: false
          },
          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          axisLine: {
            lineStyle: {
              color: "#fff"
              // width: 2
            }
          }
        },
        series: [
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} },
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} },
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} },
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} },
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} },
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} },
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} },
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} },
          { type: "line", smooth: true, seriesLayoutBy: "row", areaStyle: {} }
        ]
      };

      LineDataSource.setOption(option);
      window.addEventListener("resize", function() {
        LineDataSource.resize();
      });
    }
  }
};
</script>
